<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>分类专栏管理 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>
<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--侧边栏-->
        <div th:replace="~{fragment/blog-manage::manage}"></div>
        <!--博客内容-->
        <div class="thirteen wide column">
            <!--header-->
            <div class="ui top attached segment " style="border-bottom: none !important;padding-bottom: 0 !important;">
                <div class="four column row" style="padding-bottom: 0 !important;padding-left: 1.13rem !important;">
                    <div class="left floated column">
                        <a style="color:#bbbbbb;font-size: 1rem !important;" href="#" th:href="@{/manage/category/list(userId=${user.getUserId()})}">< 返回分类专栏</a>
                    </div>
                </div>
                <form class="ui form" method="post" th:action="@{/manage/category/saveEdit/{categoryId}/{userId}(categoryId=${category.getCategoryId()},userId=${user.getUserId()})}" enctype="multipart/form-data">
                    <div class="row" style="padding-left: 2rem !important;padding-top: 2em !important;">
                        <div class="ui form">
                            <div class="inline field">
                                <label style="color: #4f4f4f;font-size: 14px !important;">分类专栏名称：</label>
                                <input name="oldCategoryName" type="hidden"  th:value="${category.getCategoryName()}">
                                <input id="category-name" name="categoryName" type="text" style="width: 340px !important;" th:value="${category.getCategoryName()}" placeholder="请输入分类专栏名称">
                                <span hidden="hidden" id="category-name-msg" style="color: #C92027 !important;margin-left: 10px !important;">不可为空</span>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding-left: 2rem !important;padding-top: 2em !important;">
                        <div class="ui form">
                            <div class="inline  field">
                                <label style="color: #4f4f4f;font-size: 14px !important;">分类专栏简介：</label>
                                <textarea name="categoryDesc" style="width: 340px !important;" rows="5" th:text="${category.getCategoryDescription()}"   placeholder="输入分类专栏简介"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding-left: 2rem !important;padding-top: 2em !important;">
                        <div class="ui form">
                            <div class="inline  field">
                                <label style="color: #4f4f4f;font-size: 14px !important;">分类专栏配图：</label>
                                <input type="hidden" name="oldCategoryImg" th:value="${category.getCategoryImageUrl()}">
                                <input id="categoryImgUrl" name="categoryImage" th:value="${category.getCategoryImageUrl()}" style="position:absolute;opacity:0;height: 120px !important;padding: 0 !important;"
                                       onchange="show(this)" accept="image/*" type="file"/>
                                <img id="pre-look" style="width: 120px;height: 120px;" src="" th:src="${category.getCategoryImageUrl()}">
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding-left: 2rem !important;padding-top: 2em !important;">
                        <button type="submit" class="medium  ui basic red button" style="margin-left: 9rem !important;">
                            提交
                        </button>
                    </div>
                </form>
            </div>
            <div class="ui bottom attached segment " style="height: 30em "></div>
        </div>
    </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script th:online="javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
        let msg="[[${error}]]";
        if(msg!="") {
            showErrorMessage(msg)
        }
    });
</script>
<script>
    $('#add-btn').mouseenter(function () {
        $('#add-btn').removeClass("basic");
    });
    $('#add-btn').mouseleave(function () {
        $('#add-btn').addClass("basic");
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });


</script>
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    });
</script>
<script>
    $('#add-btn').mouseenter(function () {
        $('#add-btn').removeClass("basic");
    });
    $('#add-btn').mouseleave(function () {
        $('#add-btn').addClass("basic");
    });
    $('#add-btn').click(function () {
        var str = $('#category-name').val();
        if ("" == str || null == str) {
            $('#category-name-msg').show();
        } else {
            $('#category-name-msg').hide();
        }
    })
</script>
<script>
    function show(obj) {
        var rd = new FileReader(); //创建文件读取对象
        var files = obj.files[0];  //获取file组件中的文件
        rd.readAsDataURL(files);   //文件读取装换为base64类型
        rd.onloadend = function (e) {
            //加载完毕之后获取结果赋值给img
            $('#pre-look').height(120);
            $('#pre-look').width(120);
            document.getElementById("pre-look").src = this.result;
        };

    }
</script>
<script>
    $('#side-bnt5').css("background", "#DB2828");
    $('#side-bnt5').css("color", "#ffffff");
</script>
</html>